import { Form, Input, Button, DatePicker, Select, InputNumber, Col, Row } from 'antd';
import React from 'react';

const { Option } = Select;

class ItemEditForm extends React.Component {
  state = {
    confirmDirty: false,
    productVal: '5',
  };

  handleSubmit = (e: { preventDefault: () => void }) => {
    e.preventDefault();
    // @ts-ignore
    this.props.form.validateFieldsAndScroll((err: any, values: any) => {
      if (!err) {
        console.log('Received values of form: ', values);
      }
    });
  };

  handleConfirmBlur = (e: { target: { value: any } }) => {
    const { value } = e.target;
    // eslint-disable-next-line react/no-access-state-in-setstate
    this.setState({ confirmDirty: this.state.confirmDirty || !!value });
  };


  handleSelect = (e: { target: { value: any } }) => {
    this.setState({ productVal: e });
  };

  render() {
    // @ts-ignore
    const { getFieldDecorator } = this.props.form;
    console.info(this);
    const formItemLayout = {
      labelCol: {
        xs: { span: 24 },
        sm: { span: 8 },
      },
      wrapperCol: {
        xs: { span: 24 },
        sm: { span: 16 },
      },
    };
    const tailFormItemLayout = {
      wrapperCol: {
        xs: {
          span: 24,
          offset: 0,
        },
        sm: {
          span: 16,
          offset: 8,
        },
      },
    };


    const layout = { labelCol: { span: 4 }, wrapperCol: { span: 19 } };

    return (
      <div style={{ padding: 10, paddingLeft: 20 }}>
        <div style={{ padding: 10, paddingTop: 20 }}>
          <Form {...layout} onSubmit={this.handleSubmit}>
            <Form.Item label="归属产品">
              {getFieldDecorator('product', {
                rules: [
                  {
                    required: true,
                    message: '该字段不能为空!',
                  },
                ],
                initialValue: '5',
              })(
                // eslint-disable-next-line react/jsx-no-bind
                <Select onChange={this.handleSelect.bind(this)}>
                  <Option value="1">海运整柜</Option>
                  <Option value="2">海运散柜</Option>
                  <Option value="3">空运</Option>
                  <Option value="4">拖车</Option>
                  <Option value="5" >报关</Option>
                  <Option value="11">海运本地费</Option>
                  <Option value="7">外贸综合服务平台</Option>
                  <Option value="8">量子外贸自营进口服务平台</Option>
                  <Option value="9">量子外贸自营出口服务平台</Option>
                  <Option value="10">量子外贸代理进口服务平台</Option>
                </Select>,
              )}
            </Form.Item>

            {/* 报关 */}
            {/* eslint-disable-next-line eqeqeq */}
            {this.state.productVal == '5' ?
              <div>
                <Form.Item label="供应商">
                  {getFieldDecorator('supplier', {
                    rules: [
                      {
                        required: true,
                        message: '该字段不能为空!',
                      },
                    ],
                  })(
                    <Select>
                      <Option value={1}>瀚森乐达</Option>
                    </Select>,
                  )}
                </Form.Item>
                <Form.Item label="出货港口">
                  {getFieldDecorator('port', {
                    rules: [
                      {
                        required: true,
                        message: '该字段不能为空!',
                      },
                    ],
                  })(
                    <Select>
                      <Option value={1}>广州南沙港</Option>
                    </Select>,
                  )}
                </Form.Item>
                <Form.Item label="报关费">
                  {getFieldDecorator('cost1', {
                    rules: [
                      {
                        required: true,
                        message: '该字段不能为空!',
                      },
                    ],
                    initialValue: 0,
                  })(<InputNumber min={0} precision={2} style={{ width: '100%' }} />)}
                </Form.Item>
                <Form.Item label="港建费（20GP）">
                  {getFieldDecorator('cost2', {
                    rules: [
                      {
                        required: true,
                        message: '该字段不能为空!',
                      },
                    ],
                    initialValue: 0,
                  })(<InputNumber min={0} precision={2} style={{ width: '100%' }} />)}
                </Form.Item>
                <Form.Item label="港建费（40GP）">
                  {getFieldDecorator('cost3', {
                    rules: [
                      {
                        required: true,
                        message: '该字段不能为空!',
                      },
                    ],
                    initialValue: 0,
                  })(<InputNumber min={0} precision={2} style={{ width: '100%' }} />)}
                </Form.Item>
                <Form.Item label="港建费（40HQ）">
                  {getFieldDecorator('cost4', {
                    rules: [
                      {
                        required: true,
                        message: '该字段不能为空!',
                      },
                    ],
                    initialValue: 0,
                  })(<InputNumber min={0} precision={2} style={{ width: '100%' }} />)}
                </Form.Item>
                <Form.Item label="有效开始时间">
                  {getFieldDecorator('validDateRange', {
                    rules: [
                      {
                        required: true,
                        message: '该字段不能为空!',
                      },
                    ],
                  })(<DatePicker.RangePicker style={{ width: '100%' }} />)}
                </Form.Item>
                <Form.Item label="备注">
                  {getFieldDecorator('remark', {})(
                    <Input.TextArea rows={4} style={{ width: '100%' }} />,
                  )}
                </Form.Item>
              </div>
              : ''}

            {/* 海运 */}
            {this.state.productVal === '1' || this.state.productVal === '2' || this.state.productVal === '3' ?
              <div>
                <Row>
                  <Col span={12}>
                    <Form.Item {...formItemLayout} label="供应商代码" hasFeedback>
                      {getFieldDecorator('supplierId', {
                        rules: [{
                          required: true, message: '请选择供应商代码',
                        }],
                        initialValue: '',
                      })(
                        <Select>
                          <Option value="1">乐达</Option>
                        </Select>,
                      )}
                    </Form.Item>
                  </Col>
                  <Col span={12}>
                    <Form.Item {...formItemLayout} label="航线代码" hasFeedback>
                      {getFieldDecorator('airlineId', {
                        rules: [{
                          required: true, message: '请选择航线代码',
                        }],
                        initialValue: '',
                      })(
                        <Select>
                          <Option value="1">B5021521</Option>
                        </Select>,
                      )}
                    </Form.Item>
                  </Col>
                </Row>
                <Row>
                  <Col span={12}>
                    <Form.Item {...formItemLayout} label="船公司代码" hasFeedback>
                      {getFieldDecorator('berthingId', {
                        rules: [{
                          required: true, message: '请选择船公司代码',
                        }],
                        initialValue: '',
                      })(
                        <Select>
                          <Option value="1">021515</Option>
                        </Select>,
                      )}
                    </Form.Item>
                  </Col>
                  <Col span={12}>
                    <Form.Item {...formItemLayout} label="起运港" hasFeedback>
                      {getFieldDecorator('loadingPort', {
                        rules: [{
                          required: true, message: '请选择起运港',
                        }],
                        initialValue: '',
                      })(
                        <Select>
                          <Option value="1">南沙</Option>
                        </Select>,
                      )}
                    </Form.Item>
                  </Col>
                </Row>
                <Row>
                  <Col span={12}>
                    <Form.Item {...formItemLayout} label="目的港" hasFeedback>
                      {getFieldDecorator('destinationPort', {
                        rules: [{
                          required: true, message: '请选择目的港',
                        }],
                        initialValue: '',
                      })(
                        <Select>
                          <Option value="1">纽约</Option>
                        </Select>,
                      )}
                    </Form.Item>
                  </Col>
                  <Col span={12}>
                    <Form.Item {...formItemLayout} label="航程(天数)" hasFeedback>
                      {getFieldDecorator('sail', {
                        rules: [{
                          required: true, message: '请输入航程',
                        }],
                        initialValue: '',
                      })(
                        <InputNumber min={0} max={99999999999999} style={{ width: '100%' }} />,
                      )}
                    </Form.Item>
                  </Col>
                </Row>
                <Row>
                  <Col span={12}>
                    <Form.Item {...formItemLayout} label="船期" hasFeedback>
                      {getFieldDecorator('cutOff', {
                        rules: [{
                          required: true, message: '请选择船期',
                        }],
                        initialValue: '',
                      })(
                        <Input maxLength={30} />,
                      )}
                    </Form.Item>
                  </Col>
                  <Col span={12}>
                    <Form.Item {...formItemLayout} label="是否中转" hasFeedback>
                      {getFieldDecorator('transit', {
                        rules: [{
                          required: true, message: '请选择是否中转',
                        }],
                        initialValue: '',
                      })(
                        <Select>
                          <Select.Option value="1">是</Select.Option>
                          <Select.Option value="2">否</Select.Option>
                        </Select>,
                      )}
                    </Form.Item>
                  </Col>
                </Row>
                <Row>
                  <Col span={12}>
                    <Form.Item {...formItemLayout} label="中转港" hasFeedback>
                      {getFieldDecorator('transitPort', {
                        rules: [{
                          required: '请选择中转港',
                        }],
                        initialValue: '',
                      })(
                        <Select>
                          <Option value="1">圣地亚哥</Option>
                        </Select>,
                      )}
                    </Form.Item>
                  </Col>
                  <Col span={12}>
                    <Form.Item {...formItemLayout} label="20GP费用" hasFeedback>
                      {getFieldDecorator('fee20gp', {
                        rules: [{
                          required: true, message: '请输入20GP费用',
                        }],
                        initialValue: '',
                      })(
                        <InputNumber max={99999999999999} style={{ width: '100%' }} />,
                      )}
                    </Form.Item>
                  </Col>
                </Row>
                <Row>
                  <Col span={12}>
                    <Form.Item {...formItemLayout} label="40GP费用" hasFeedback>
                      {getFieldDecorator('fee40gp', {
                        rules: [{
                          required: true, message: '请输入40GP费用',
                        }],
                        initialValue: '',
                      })(
                        <InputNumber max={99999999999999} style={{ width: '100%' }} />,
                      )}
                    </Form.Item>
                  </Col>
                  <Col span={12}>
                    <Form.Item {...formItemLayout} label="40HQ费用" hasFeedback>
                      {getFieldDecorator('fee40hq', {
                        rules: [{
                          required: true, message: '请输入40HQ费用',
                        }],
                        initialValue: '',
                      })(
                        <InputNumber max={99999999999999} style={{ width: '100%' }} />,
                      )}
                    </Form.Item>
                  </Col>
                </Row>
                <Row>
                  <Col span={12}>
                    <Form.Item {...formItemLayout} label="有效开始时间" hasFeedback>
                      {getFieldDecorator('begindate', {
                        rules: [{
                          required: true, message: '请选择有效开始时间',
                        }],
                        initialValue: '',
                      })(
                        <DatePicker style={{ width: '100%' }}
                                    showTime={{ format: 'YYYY-MM-DD' }}
                                    format="YYYY-MM-DD" placeholder="请选择有效开始时间" />,
                      )}
                    </Form.Item>
                  </Col>
                  <Col span={12}>
                    <Form.Item {...formItemLayout} label="有效结束时间" hasFeedback>
                      {getFieldDecorator('enddate', {
                        rules: [{
                          required: true, message: '请选择有效结束时间',
                        }],
                        initialValue: '',
                      })(
                        <DatePicker style={{ width: '100%' }}
                                    showTime={{ format: 'YYYY-MM-DD' }}
                                    format="YYYY-MM-DD" placeholder="请选择有效结束时间" />,
                      )}
                    </Form.Item>
                  </Col>
                </Row>
                <Row>
                  <Col span={24}>
                    <Form.Item {...layout} label="特价船期" hasFeedback>
                      {getFieldDecorator('specialShipPeriod', {
                        rules: [{
                          required: false, message: '请输入特价船期',
                        }],
                        initialValue: '',
                      })(
                        <Input maxLength={100} />,
                      )}
                    </Form.Item>
                  </Col>
                </Row>
                <Row>
                  <Col span={24}>
                    <Form.Item {...layout} label="备注" hasFeedback>
                      {getFieldDecorator('memo', {
                        rules: [{
                          required: false, message: '请输入备注',
                        }],
                        initialValue: '',
                      })(
                        <Input.TextArea maxLength={300} autosize />,
                      )}
                    </Form.Item>
                  </Col>
                </Row>
              </div>
              : ''}

              {/* 拖车 */}
            {this.state.productVal === '4' ?
                <div>
                  <Row>
                    <Col span={12}>
                      <Form.Item {...formItemLayout} label="供应商代码" hasFeedback>
                        {getFieldDecorator('supplierId', {
                          rules: [{
                            required: true, message: '请选择供应商代码',
                          }],
                          initialValue: '',
                        })(
                          <Select>
                            <Option value="1">乐达</Option>
                          </Select>,
                        )}
                      </Form.Item>
                    </Col>
                    <Col span={12}>
                      <Form.Item {...formItemLayout} label="装柜地址" hasFeedback>
                        {getFieldDecorator('area', {
                          rules: [{
                            required: true, message: '请选择装柜地址(省市区)',
                          }],
                          initialValue: '',
                        })(
                          <Select>
                            <Option value="1">广州海珠区江海街道</Option>
                          </Select>,
                        )}
                      </Form.Item>
                    </Col>
                  </Row>
                  <Row>
                    <Col span={12}>
                      <Form.Item {...formItemLayout} label="出货港口" hasFeedback>
                        {getFieldDecorator('port', {
                          rules: [{
                            required: true, message: '请选择出货港口',
                          }],
                          initialValue: '',
                        })(
                          <Select>
                            <Option value="1">南沙</Option>
                          </Select>,
                        )}
                      </Form.Item>
                    </Col>
                    <Col span={12}>
                      <Form.Item {...formItemLayout} label="20GP单价" hasFeedback>
                        {getFieldDecorator('fee20gp', {
                          rules: [{
                            required: true, message: '请输入20GP单价',
                          }],
                          initialValue: '',
                        })(
                          <InputNumber placeholder="输入金额币种为人民币" max={99999999999} style={{ width: '100%' }} />,
                        )}
                      </Form.Item>
                    </Col>

                  </Row>
                  <Row>

                    <Col span={12}>
                      <Form.Item {...formItemLayout} label="40GP单价" hasFeedback>
                        {getFieldDecorator('fee40gp', {
                          rules: [{
                            required: true, message: '请输入40GP单价',
                          }],
                          initialValue: '',
                        })(
                          <InputNumber placeholder="输入金额币种为人民币" max={99999999999} maxLength={18} style={{ width: '100%' }} />,
                        )}
                      </Form.Item>
                    </Col>
                    <Col span={12}>
                      <Form.Item {...formItemLayout} label="40HQ单价" hasFeedback>
                        {getFieldDecorator('fee40hq', {
                          rules: [{
                            required: true, message: '请输入40HQ单价',
                          }],
                          initialValue: '',
                        })(
                          <InputNumber placeholder="输入金额币种为人民币" max={99999999999} maxLength={18} style={{ width: '100%' }} />,
                        )}
                      </Form.Item>
                    </Col>
                  </Row>
                  <Row>
                    <Col span={12}>
                      <Form.Item {...formItemLayout} label="限重(Kg)" hasFeedback>
                        {getFieldDecorator('weightLimit', {
                          rules: [{
                            required: true, message: '请输入限重',
                          }],
                          initialValue: '',
                        })(
                          <InputNumber min={0} max={99999999999} maxLength={18} style={{ width: '100%' }} />,
                        )}
                      </Form.Item>
                    </Col>
                    <Col span={12}>
                      <Form.Item {...formItemLayout} label="备注" hasFeedback>
                        {getFieldDecorator('memo', {
                          rules: [{
                            required: false, message: '请输入备注',
                          }],
                          initialValue: '',
                        })(
                          <Input.TextArea maxLength={300} autosize/>,
                        )}
                      </Form.Item>
                    </Col>
                  </Row>
                  <Row>
                    <Col span={12}>
                      <Form.Item {...formItemLayout} label="有效开始时间" hasFeedback>
                        {getFieldDecorator('begindate', {
                          rules: [{
                            required: true, message: '请选择有效开始时间',
                          }],
                          initialValue: '',
                        })(
                          <DatePicker style={{ width: '100%' }} showTime={{ format: 'YYYY-MM-DD' }}
                                      format="YYYY-MM-DD" placeholder="请选择有效开始时间" />,
                        )}
                      </Form.Item>
                    </Col>
                    <Col span={12}>
                      <Form.Item {...formItemLayout} label="有效截止时间" hasFeedback>
                        {getFieldDecorator('enddate', {
                          rules: [{
                            required: true, message: '请选择有效截止时间',
                          }],
                          initialValue: '',
                        })(
                          <DatePicker style={{ width: '100%' }} showTime={{ format: 'YYYY-MM-DD' }}
                                      format="YYYY-MM-DD" placeholder="请选择有效截止时间" />,
                        )}
                      </Form.Item>
                    </Col>
                  </Row>
                </div>
              : ''}

              {/* 本地费 */}
            {this.state.productVal === '11' ?
              <div>
                <Row>
                  <Col span={12}>
                    <Form.Item {...formItemLayout} label="供应商代码" hasFeedback>
                      {getFieldDecorator('supplierId', {
                        rules: [{
                          required: true, message: '请选择供应商代码',
                        }],
                        initialValue: '',
                      })(
                        <Select>
                          <Option value="1">021515</Option>
                        </Select>,
                      )}
                    </Form.Item>
                  </Col>
                  <Col span={12}>
                    <Form.Item {...formItemLayout} label="航线代码" hasFeedback>
                      {getFieldDecorator('airlineId', {
                        rules: [{
                          required: true, message: '请选择航线代码',
                        }],
                        initialValue: '',
                      })(
                        <Select>
                          <Option value="1">021515</Option>
                        </Select>,
                      )}
                    </Form.Item>
                  </Col>
                </Row>
                <Row>
                  <Col span={12}>
                    <Form.Item {...formItemLayout} label="船公司代码" hasFeedback>
                      {getFieldDecorator('berthingId', {
                        rules: [{
                          required: true, message: '请选择船公司代码',
                        }],
                        initialValue: '',
                      })(
                        <Select>
                          <Option value="1">021515</Option>
                        </Select>,
                      )}
                    </Form.Item>
                  </Col>
                  <Col span={12}>
                    <Form.Item {...formItemLayout} label="有效开始时间" hasFeedback>
                      {getFieldDecorator('begindate', {
                        rules: [{
                          required: true, message: '请选择有效开始时间',
                        }],
                        initialValue: '',
                      })(
                        <DatePicker style={{ width: '100%' }} showTime={{ format: 'YYYY-MM-DD' }}
                                    format="YYYY-MM-DD" placeholder="请选择有效开始时间" />,
                      )}
                    </Form.Item>
                  </Col>
                </Row>
                <Row>
                  <Col span={12}>
                    <Form.Item {...formItemLayout} label="有效截止时间" hasFeedback>
                      {getFieldDecorator('enddate', {
                        rules: [{
                          required: true, message: '请选择有效截止时间',
                        }],
                        initialValue: '',
                      })(
                        <DatePicker style={{ width: '100%' }} showTime={{ format: 'YYYY-MM-DD' }}
                                    format="YYYY-MM-DD" placeholder="请选择有效截止时间" />,
                      )}
                    </Form.Item>
                  </Col>
                </Row>
              </div>
              : ''}

            <Form.Item {...tailFormItemLayout}>
              <Button type="primary" htmlType="submit">
                保存
              </Button>
            </Form.Item>
          </Form>
        </div>
      </div>
    );
  }
}

const WrappedItemEditForm = Form.create({ name: 'register' })(ItemEditForm);

// @ts-ignore
export default WrappedItemEditForm;
